<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>做个俗人，贪财好色。</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 1600px;
            height: 825px;
            background: url(./img/1.jpg) no-repeat;
            position: relative;
        }


        p {
            font-size: 80px;
            color: #fff;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        p:nth-of-type(1) {
            position: absolute;
            top: 169px;
            left: 445px;
        }

        p:nth-of-type(2) {
            position: absolute;
            top: 169px;
            left: 660px;
        }

        p:nth-of-type(3) {
            position: absolute;
            top: 169px;
            left: 875px;
        }

        p:nth-of-type(4) {
            font-size: 30px;
            position: absolute;
            top: 310px;
            left: 900px;
        }

        span {
            display: block;
            width: 100%;
            height: 30px;
            border-radius: 15px;
            background-color: rgb(210, 131, 144);

        }

        .jin {
            width: 427px;
            position: absolute;
            top: 317px;
            left: 454px;

        }
       
       
    </style>
</head>

<body>
    <div class="wrap">
        <div class="jin"><span></span></div>
        <p>00</p>
        <p>00</p>
        <p>00</p>
        <p>100%</p>
    </div>
    <script>
        var ospan = document.getElementsByTagName('span')[0];
        var op = document.getElementsByTagName('p');
        var timer = setInterval(auto, 1000)

        auto()

        function auto() {
            //获取当前时间
            var nowtime = new Date();
            //设置未来时间
            var weitime = new Date('9999/12/30')
            //将未来和的当前时间改为时间戳
            nowtime = nowtime.getTime();
            weitime = weitime.getTime();

            //定义倒计时 用未来时间的时间戳减去当前时间的时间戳
            var time = weitime - nowtime;
            time = parseInt(time / 1000)

            // 获取小时
            var h = parseInt((time % 86400) / 3600);
            // 获取分钟
            var m = parseInt((time % 86400 % 3600) / 60);
            // // 获取秒数
            var s = parseInt(time % 60);
            // // 获取百分比
            var bai = parseInt((h / 24 + m / (60 * 24)) * 100)

            //将获取到的值分别赋值给对应元素
            op[0].innerHTML = zero(h)
            op[1].innerHTML = zero(m)
            op[2].innerHTML = zero(s)
            op[3].innerHTML = zero(bai + '%')
            ospan.style.width = bai + '%'

            //补0封装
            function zero(num) {
                return num < 10 && num >= 0 ? '0' + num : num
            }
        }
    </script>
</body>

</html>